<template>
<div>
	<ol class="breadcrumb">
      <li class="breadcrumb-item">专题管理</li>
      <li class="breadcrumb-item">专题详情</li>
      <li class="breadcrumb-item cursor" @click="toBack">返回上一页</li>
    </ol>
    <div class="biaoqing-container flex p-2">
    	<div class="topic-img-box clearfloat">
    		<div class="topic-banner fl">
          <img :src="topicDetail.fullBanner">
        </div>
			  <div class="topic-cover fl"><img :src="topicDetail.fullCover"></div>
    	</div>
    </div>
    <div class="topic-content-box p-2">
      <div class="col-sm-12" style="padding-left:0;">
        <div class="form-group-alt-attached">
          <div class="row">
            <div class="col-sm-3 ">
              <div class="form-group form-group-alt">
                <label>话题名称</label>
                <span class="form-control color999 flex-center">{{topicDetail.name}}</span>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="form-group form-group-alt">
                <label>热门</label>
                <span v-if="topicDetail.isHot===true" class="form-control color999 flex-center">是</span>
                <span v-else class="form-control color999 flex-center">否</span>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="form-group form-group-alt">
                <label>创建时间</label>
                <span class="form-control color999 flex-center">{{topicDetail.createTime}}</span>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="form-group form-group-alt">
                <label>定时</label>
                <span @click="opentime(topicDetail.id)" class="form-control pass-success cursor flex-center">定时上线</span>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 ">
              <div class="form-group form-group-alt">
                <label>描述</label>
                <span class="color999 flex-center">{{topicDetail.summary}}</span>
              </div>
            </div>
          </div>
        </div>
      </div> <!-- col-sm-12 -->
    </div>
    <div class="" style="font-weight:bold;font-size:16px;margin:10px 16px;">作品（{{works.totalCount}}）</div>
    <div class="biaoqing-container p-2">

      <div class="fl ml-3 mb-3">
        <span class="color999 hot-message-title">每页显示多少个结果:</span>
        <input type="number" min="10" v-model="pageSize" placeholder="每页显示多少个结果" class="hot-message" style="width:80px;" @keyup.enter="goSubject(1)">
        <span class="btn btn-sm btn-info cursor" @click="goSubject(1)">确定</span>
      </div>

      <div class="biaoqing-table">
        <Subjectlist 
          :works="works"
          :tags="tags"
          :keyword="keyword"
          :sort="sort"
          :asc="asc"
          :page="page"
          @goSubject="goSubject"
        ></Subjectlist>
        
        <Pagepublic :pages="works" @paging="goSubject"></Pagepublic>
      </div> 
    </div>
    <div class="mask" :class="{'none':timeMask==false}">
      <div @click="closetime" class="mask-bg"></div>
      <div class="mask-main task-mask">
        <div class="flex select_form_datetime flex-width-center">
          <input size="16" type="text"  readonly class="text-center topic-time-task form_datetime">
        </div>
        <div class="flex select_form_datetime flex-width-center">
          <input size="16" type="text" v-model="sort_no" class="text-center " placeholder="排序">
        </div>
        <div class="task-mask-btn mt-4">
          <span @click="closetime" class="cursor btn btn-sm btn-secondary">取消</span>
          <span @click="entrytime" class="cursor btn btn-sm btn-success">确定</span>
        </div>
      </div>
    </div>
</div>
</template>

<script>
import '../../../static/css/biaoqing/biaoqing.css'
import '../../../static/css/biaoqing/topic.css'
import '../../../static/css/bootstrap-datetimepicker.min.css'
import '../../../static/js/bootstrap-datetimepicker.min.js'
import Subjectlist from '../../widgets/subjectlist.vue'
import { Topic,Subject } from '../../resources'
import { viewImg, clearViewImg,formatTime } from '../../misc/utils'
import swal2 from 'sweetalert2'
import querystring from 'querystring'
import $ from 'jquery'
import Pagepublic from '../../widgets/pagepublic.vue'
export default{
	data:() => ({
    pageSize:10,
    time:'',
    timeMask:false,
    timeid:'',
    sort_no:'',
		loading: false,
		topicDetail:'',
    works:'',
    tags:'',
    page:1,
    sort:'',
    asc:true,
    formPage:'',
    keyword:''
	}),
	beforeRouteEnter(to,form,next){
		var id = to.params.id;
    var keyword ='#'+to.query.keyword+'#';
    var params = {
			id:id
		}
    var worksdata = {
      pageSize:10,
      pageNum:1,
      enable:1,
      keyword:keyword
    }
    var req=[Topic.topicDetail(params),Subject.works(worksdata),Subject.tags()]
		Promise.all(req).then(([detail,works,tags]) => {
      for(var i = 0;i<works.data.data.items.length;i++){
        works.data.data.items[i].createTime=formatTime(works.data.data.items[i].createTime)
      }
      detail.data.data.createTime=formatTime(detail.data.data.createTime);
      next(vm => {
        vm.tags=tags.data;
        vm.works = works.data.data;
        vm.keyword=worksdata.keyword;
        vm.topicDetail=detail.data.data
      })
		})
	},
	mounted () {
    this.dateDefault();
    this.$emit('loaded',false)
  },
  methods: {
  	goSubject(page,keyword,sort,asc){
      this.$emit('loaded',true);
      var params = {
        pageSize:this.pageSize || 10,
        pageNum:page
      }
      if(keyword && keyword!=''){
        params.keyword=keyword;
      }else{
        params.keyword=this.keyword;
      }
      if(sort && sort!=''){
        params.sort = sort;
        params.asc = asc;
        params.enable=this.enable;
      }else{
        params.sort = this.sort;
        params.asc = this.asc;
      }
      Promise.all([Subject.works(params)]).then(([works]) => {
        $('body,html').animate({scrollTop:0},10);
        for(var i = 0;i<works.data.data.items.length;i++){
          works.data.data.items[i].createTime=formatTime(works.data.data.items[i].createTime)
        }
        this.page=params.page;
        this.sort=params.sort;
        this.asc=params.asc;
        this.enable=params.enable;
        this.$emit('loaded',false)
        this.keyword=params.keyword;
        this.works=works.data.data;
      })
    },
    toBack(){
      history.go(-1)
    },
    closetime(){
      this.timeMask=false;
      this.timeid = ''
    },
    opentime(id){
      this.timeMask=true;
      this.timeid = id
    },
    entrytime(){
      var that = this;
      var sort_no = this.sort_no;
      var time = $('.form_datetime').val()
      if(sort_no!=''){
        var params = {
          "executeTime": time,
          "sortNo": sort_no,
          "topicId": this.timeid
        }
        that.$http.post('/topic/task',params).then(res => {
          if (res.data.code==200) {
            that.closetime()
            that.$notice.success(res.data.msg)
          }else{
            that.$notice.error(res.data.msg)
          }
        })
      }else{
        that.$notice.error('输入排序值')
      }
      
    },
    dateDefault(){
      var now = new Date();
      var Month = (now.getMonth()+1)<10? '0'+ (now.getMonth()+1): (now.getMonth()+1);
      var day = now.getDate()<10? '0'+ now.getDate(): now.getDate();
      var hour = now.getHours()<10? '0'+ now.getHours(): now.getHours();
      var Minutes = now.getMinutes()<10? '0'+ now.getMinutes(): now.getMinutes();
      var Seconds = now.getSeconds()<10? '0'+ now.getSeconds(): now.getSeconds();

      var nowday = now.getFullYear()+"-"+Month+"-"+day+' '+hour+':'+Minutes+':'+Seconds;

      $('.topic-time-task').val(nowday)
      $('.form_datetime').datetimepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd hh:ii:ss',
        startDate: nowday,
        weekStart: 1,    //一周从那一天开始，默认值为:0,范围：0-6
        todayBtn: 1,    //默认值：false，为true时，底部显示today，不选中，为linked时当天日期被选中
        autoclose: true,    //选择一个日期后是否立即关闭此选择框
        todayHighlight: 1,  //高亮当前日期
        startView: 2,     // 日期时间选择器打开之后首先显示的视图，默认值为：2，0:hour,1:day,2:mouth,3:year,4:decade
        forceParse: 0,    //强制解析文本框的值
        minuteStep: 2
       });
    }
  },
  components:{Pagepublic,Subjectlist}
}


</script>
<style>
  /*date start*/
  .task-mask{
    width: 340px;
    left: 50%;
    top: 40%;
    margin-left: -170px;
    padding: 10px;
  }
  .select_form_datetime{
    width: 300px;
    margin: 0 auto;
  }
  .select_form_datetime input{
    flex:1;
    font-size: 16px;
    padding:  5px;
    outline: none;
    border:none;
    border-bottom: 1px solid #ddd;
  }
  legend{
    font-size: 16px !important;
  }
  .task-mask-btn{
    text-align: center;
  }
  .datetimepicker{
    width: 250px;
    font-size: 13px;
  }
  .datetimepicker .table-condensed{
    width: 100%;
  }
  /*date end*/
  .table td, .table th{
    padding: 5px;
    font-size: 13px;
  }
  .selecTagContainer .table thead th{
    border-bottom: 1px;
  }
  .show{
    display: block;
  }
  .select-user{
    font-size: 13px;
    color: #58c6ff;
  }
  .select-user:hover{
    color: #17b0ff;
  }
  .clear-model-user{
    font-size: 14px;
    line-height: 38px;
    margin-left: 20px;
  }
</style>